<template>
    <form class="mui-input-group">
      <div class="mui-input-row">
        <label class="tit">收件人</label>
        <input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">
      </div>
      <div class="mui-input-row">
        <label class="tit">联系方式</label>
        <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
      </div>
      <div class="mui-input-row">
        <label class="tit">所在地区</label>
        <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
        <div class="divwrap">
  <div class="mask" @click="choose" v-show="show"></div>
  <v-distpicker
    v-show="show"
    type="mobile"
    @province="onChangeProvince"
    @city="onChangeCity"
    @area="onChangeArea"
    :province="newInfo.province"
    :city="newInfo.city"
    :area="newInfo.district"
  >
  </v-distpicker>
</div>

      </div>
      <div class="mui-input-row">
        <label class="tit">详细地址</label>
        <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
      </div>
      <div class="mui-button-row">
        <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
        <button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
      </div>
    </form>
  </template>
  <script>
  import VDistpicker from 'v-distpicker'
  
  export default {
    
    data () {
      return {
        form: {
          name: '',
          tel: '',
          area: '',
          detail: ''
        },
        show: false,     // 是否显示遮罩层
    newInfo: {
      province: '', // 省
      city: '',     // 市
      area: '',     // 区
    }

      }
    },
    props: ['id'],
created () {
  this.getAddress()
},

    methods: {
      getAddress () {
    if (!this.id) {
      return
    }
    this.$indicator.open({
      text: '加载中'
    })
    var params = { id: this.id }
    this.$http.get('address/edit', { params: params }).then(res => {
      this.$indicator.close()
      if (res.data.code === 0) {
    this.$toast(res.data.msg)
  } else if (res.data.code === 1) {
    this.form = res.data.data
  } else if (res.data.code === 2) {
    this.$router.push({ name: 'login' })
  }

      window.console.log(res.data)
    })
  },



      save () {
  this.$indicator.open({
    text: '提交中'
  })
  this.form.id = this.id
  this.$http.post('address/save', this.form).then(res => {
  this.$indicator.close()
  if (res.data.code === 0) {
    this.$toast(res.data.msg)
  } else if (res.data.code === 1) {
    this.$toast(res.data.msg)
    this.$router.go(-1)
  } else if (res.data.code === 2) {
    this.$router.push({ name: 'login' })
  }
})

},

      
      choose () {
    this.show = !this.show
  },
  onChangeProvince (data) {
    this.newInfo.province = data.value
  },
  onChangeCity (data) {
    this.newInfo.city = data.value
  },
  onChangeArea (data) {
    this.newInfo.area = data.value
    this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area
    this.show = false
  },
  del () {
    this.$indicator.open({
      text: '删除中'
    })
    this.form.id = this.id
    this.$http.post('address/del', this.form).then(res => {
      this.$indicator.close()
      if (res.data.code === 0) {
    this.$toast(res.data.msg)
  } else if (res.data.code === 1) {
    this.$toast(res.data.msg)
    this.$router.go(-1)
  } else if (res.data.code === 2) {
    this.$router.push({ name: 'login' })
  }

      window.console.log(res.data)
    })
  }


    },


    components: {
    'v-distpicker': VDistpicker
  }

  }
  </script>
  <style lang="scss" scoped>
  .mui-input-group .mui-button-row {
    height: auto;
  }
  .mui-input-clear {
    font-size: 14px;
  }
  .mui-input-group:before {
    list-style: none;
  }
  .mui-button-row {
    margin-top: 20px;
    button {
      margin: 20px 0;
      padding: 10px 0;
    }
  }
  .tit {
    color: #999;
  }
  input::-webkit-input-placeholder {
    color: #999;
  }
  input::-moz-placeholder {   /* Mozilla Firefox 19+ */
    color: #999;
  }
  input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
    color: #999;
  }
  input:-ms-input-placeholder {  /* Internet Explorer 10-11 */
    color: #999;
  }
  .divwrap > .mask {
  background: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.divwrap > .distpicker-address-wrapper {
  color: #999;
  background: #fff;
  border-top: 1px solid #ccc;
  z-index: 1;
  height: 300px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

</style>
